<template>
    <div id="a">
        <header>
            <span>推荐歌单</span>
            <MoreCome @click="geDanJump()"/>
        </header>
        <div id="list">
            <ul>
                <RecommendedSongListSwiper :songListSwiper="songListSwiperFn" :songListItem="songList"/>
                <li v-for="item of songListOthersFn" :key="item.id" @click="rslJump(item)">
                    <img :src="item.picUrl" alt="">
                    <span>{{item.name}}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import RecommendedSongListSwiper from "./swiper/RecommendedSongListSwiper.vue";
    import {getBanner} from "@/api";
    import MoreCome from "./MoreCome.vue";
    export default {
        name: "RecommendedSongList",
        components:{
            RecommendedSongListSwiper,
            MoreCome
        },
        data(){
            return{
                songList:[],
            }
        },
        mounted() {
            getBanner('/personalized?limit=8')
                .then(response=>{
                    this.songList = response.data.result
                    console.log(this.songList)
                })
        },
        computed:{
            songListSwiperFn(){
                return this.songList.slice(0,3)
            },
            songListOthersFn(){
                return this.songList.slice(3)
            }
        },
        methods:{
            geDanJump(){
                this.$router.push('/songsheet-view')
            },
            rslJump(item){
                this.$router.push({path: '/playmusic-view',query:item})

            },

        }
    }
</script>

<style scoped>
    #a{
        width:100%;
        height: 160px;
        background: #fff;
        padding-top: 10px;
        border-radius: 10px;
    }
    header{
        width: 94%;
        margin: 5px auto;
    }
    header>div{
        width: 50px;
        float: right;
        border: .5px solid lightgrey;
        border-radius: 8px;
        font-size: 12px;
        text-align: center;
    }
    #list{
        width: 94%;
        margin: 10px auto;
        overflow-x: scroll;
        overflow-y: hidden;
    }
    #list::-webkit-scrollbar{
        display: none;
    }
    ul{
        width: 660px;
    }
    ul>li{
        width: 110px;
        height: 110px;
        float: left;
    }
    img{
        width: 80%;
        margin: 0 auto;
    }
    span{
        font-size: 12px;
        display: inline-block;
    }
</style>